import React, { useEffect } from 'react';
import { TouchableHighlight, Text, StyleSheet } from 'react-native';
import { Flex, Toast } from '@ant-design/react-native';
import { useNavigation } from '@react-navigation/native';
import { LoadingContainer } from '@/rcomponents/Container';
import FlexTextField from '@/rcomponents/flexTextField';
import { IconX } from '@/rcomponents/iconx';
import UserStore from '@/stores/userStore';
import { formatDate } from '@/helpers/dateutil';
import MaintainFilterHeader from './components/maintainFilterHeader';
import Card from './components/responsiveCard';
import AreaJobStore from './areaJobStore';
import AreaJobDetailPage from './areaJobDetailPage';

const styles = StyleSheet.create({});

function AreaJobsTab() {
  const navigation = useNavigation();
  const ajStore = AreaJobStore.useStore();
  const userStore = UserStore.useStore();
  const { filterCond } = ajStore;
  useEffect(() => {
    console.log('area job tab efffect');
  }, []);
  const handleListLoad = async (filter) => {
    const res = await ajStore.getJobList(
      userStore.user.LoginName,
      filter || filterCond,
    );
    if (res.errorCode) {
      Toast.fail(res.errorMsg);
    }
  };
  const handleDetailNavigate = (item) => {
    //if (ajStore.getJobList.loading) {
    //  return;
    //}
    navigation.navigate(AreaJobDetailPage.routeName, {
      id: item.id,
      flightTid: item.flightTid,
      area: item.area,
    });
  };
  return (
    <LoadingContainer
      loading={ajStore.getJobList.loading}
      onRefresh={handleListLoad}
      header={
        <MaintainFilterHeader
          onReload={handleListLoad}
          filterCond={filterCond}
        />
      }
      data={ajStore.list}
      renderItem={({ item }) => (
        <TouchableHighlight
          underlayColor="#CCC"
          activeOpacity={0.5}
          onPress={() => handleDetailNavigate(item)}
        >
          <Card key={item.id}>
            <Card.Header
              title={item.airplane_no}
              extra={<IconX origin="ant" name="right" />}
            />
            <Card.Body>
              <Flex>
                <FlexTextField label="区域" fieldValue={item.areaShow} />
                <FlexTextField label="任务数" fieldValue={item.taskCount} />
              </Flex>
              <Flex>
                <FlexTextField label="包号" fieldValue={item.packNo} />
                <FlexTextField label="站点" fieldValue={item.station} />
              </Flex>
              <Flex>
                <FlexTextField label="区域负责人" fieldValue={item.areaPer} />
                <FlexTextField
                  label="计划日期"
                  fieldValue={formatDate(item.planDate, 'YYYY-MM-DD')}
                />
              </Flex>

              <Flex>
                <FlexTextField
                  label="已完工数量"
                  fieldValue={item.finishTaskCount}
                />
                <FlexTextField
                  label="完工百分比"
                  fieldValue={item.taskPersent}
                />
              </Flex>
            </Card.Body>
          </Card>
        </TouchableHighlight>
      )}
    />
  );
}

export default AreaJobsTab;
